<template>
  <el-card class="store-account">

    <!-- 账户信息展示表格 -->
    <h1 class="small-title" style="margin-bottom: 15px;">账户信息</h1>
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item label="账户ID" label-align="center" align="center">
        {{ storeAccount.account.accountId }}
      </el-descriptions-item>
      <el-descriptions-item label="账户余额" label-align="center" align="center">
        {{ storeAccount.account.balance.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="账户状态" label-align="center" align="center">
        <el-tag type="success" v-if="storeAccount.account.status === 1">正常</el-tag>
        <el-tag type="danger" v-else-if="storeAccount.account.status === 2">已注销</el-tag>
        <el-tag type="warning" v-else>异常</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <h1 class="small-title" style="margin-top: 30px; margin-bottom: 10px;">流水信息</h1>
    <el-tabs v-model="activeName">
      <el-tab-pane label="近一周" name="week">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[0].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[1].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[0] - incomeAndExpend[1]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="weekBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
            :width="item.width" :sortable="item.sortable" />
          <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="week_config.total" class="pager mt-4"
          @current-change="weekChangePage" :page-size="week_config.size" />
      </el-tab-pane>

      <el-tab-pane label="近一月" name="month">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[2].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[3].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[2] - incomeAndExpend[3]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="monthBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
            :width="item.width" :sortable="item.sortable" />
          <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="month_config.total" class="pager mt-4"
          @current-change="monthChangePage" :page-size="month_config.size" />
      </el-tab-pane>

      <!-- 所有流水 -->
      <el-tab-pane label="所有流水" name="all">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[4].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[5].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[4] - incomeAndExpend[5]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="allBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
            :width="item.width" :sortable="item.sortable" />
          <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="all_config.total" class="pager mt-4"
          @current-change="allChangePage" :page-size="all_config.size" />
      </el-tab-pane>

    </el-tabs>

  </el-card>
</template>
<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const { proxy } = getCurrentInstance()
const storeAccount = reactive({
  account: {
    "accountId": "",
    "balance": 0,
    "status": 0
  }
});
// 控制表格加载遮罩窗是否出现
const loading = ref(false);
const allBillList = ref([]);
const weekBillList = ref([]);
const monthBillList = ref([]);
const activeName = ref('week');
const all_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const week_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const month_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const incomeAndExpend = ref([0.0, 0.0, 0.0, 0.0, 0.0, 0.0]);

const tableLabel = reactive([
  {
    prop: "billId",
    label: "流水ID",
    width: 200
  },
  {
    prop: "sendAccountId",
    label: "转出方账户ID",
    width: 200
  },
  {
    prop: "receiveAccountId",
    label: "接收方账户ID",
    width: 200
  },
  {
    prop: 'billTime',
    label: "流水发生时间",
    width: 200
  },
  {
    prop: 'moreInfo',
    label: "订单备注",
  }
])

/**
 * 获取商店对应的商店账户信息
 * @param {string} userId 商店ID
 */
const getStoreAccount = async (storeId) => {
  let res = await proxy.$api.account.getAccountOfStore(storeId);
  storeAccount.account = res.data;
}

/**
 * 所有流水-翻页操作
 * @param {number} page 目标页码
 */
const allChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  all_config.current = page;
  await flowAll(store.state.store.manageStoreId);
  loading.value = false;
}

/**
 * 近一周流水-翻页操作
 * @param {number} page 目标页码
 */
const weekChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  week_config.current = page;
  await flowOfWeek(store.state.store.manageStoreId);
  loading.value = false;
}

/**
 * 近一月流水-翻页操作
 * @param {number} page 目标页码
 */
const monthChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  month_config.current = page;
  await flowOfMonth(store.state.store.manageStoreId);
  loading.value = false;
}

/**
 * 获取商店的所有流水
 */
const flowAll = async (storeId) => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfStoreBill(storeId, { current: all_config.current, size: all_config.size });
  // 更新表格数据
  allBillList.value = res.data.billList;
  all_config.total = res.data.total;
}

/**
 * 获取商店的近一周流水
 */
const flowOfWeek = async (storeId) => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfStoreWeekBill(storeId, { current: week_config.current, size: week_config.size });
  // 更新表格数据
  weekBillList.value = res.data.billList;
  week_config.total = res.data.total;
}

/**
 * 获取商店的近一月流水
 */
const flowOfMonth = async (storeId) => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfStoreMonthBill(storeId, { current: month_config.current, size: month_config.size });
  // 更新表格数据
  monthBillList.value = res.data.billList;
  month_config.total = res.data.total;
}

/**
 * 获取当前页面需要的所有入账和支出
 */
const getAllIncomeAndExpend = async () => {
  for (let i = 0; i <= 2; ++i) {
    let ret = await proxy.$api.bill.storeAccountStatistics(store.state.store.manageStoreId, i);
    incomeAndExpend.value[i * 2] = ret.data.income;
    incomeAndExpend.value[i * 2 + 1] = ret.data.expend;
  }
}

onMounted(async () => {
  loading.value = true;
  await getStoreAccount(store.state.store.manageStoreId);
  await getAllIncomeAndExpend();
  await flowAll(store.state.store.manageStoreId);
  await flowOfWeek(store.state.store.manageStoreId);
  await flowOfMonth(store.state.store.manageStoreId);
  loading.value = false;
})
</script>

<style lang="less" scoped>
.store-account {

  .small-title {
    font-size: 18px;
  }

  .expand-info {
    margin-left: 60px;
    line-height: 30px;
    font-size: 15px;
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>